import React, { useState, useRef, useEffect } from 'react'
import { clsx } from 'clsx'

export interface InputBoxProps {
  value: string
  onChange: (value: string) => void
  onSubmit?: () => void
  placeholder?: string
  disabled?: boolean
  maxLength?: number
  minRows?: number
  maxRows?: number
  className?: string
}

export const InputBox: React.FC<InputBoxProps> = ({
  value,
  onChange,
  onSubmit,
  placeholder = '输入你的问题...',
  disabled = false,
  maxLength,
  minRows = 1,
  maxRows = 6,
  className = ''
}) => {
  const [isFocused, setIsFocused] = useState(false)
  const textareaRef = useRef<HTMLTextAreaElement>(null)

  // 自动调整高度
  useEffect(() => {
    if (textareaRef.current) {
      textareaRef.current.style.height = 'auto'
      const scrollHeight = textareaRef.current.scrollHeight
      const lineHeight = 24 // 假设行高为24px
      const minHeight = minRows * lineHeight
      const maxHeight = maxRows * lineHeight
      
      textareaRef.current.style.height = `${Math.max(minHeight, Math.min(maxHeight, scrollHeight))}px`
    }
  }, [value, minRows, maxRows])

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault()
      if (onSubmit && value.trim()) {
        onSubmit()
      }
    }
  }

  const characterCount = value.length
  const isNearLimit = maxLength && characterCount > maxLength * 0.8

  return (
    <div className={clsx(
      'relative transition-all duration-200 ease-out',
      className
    )}>
      {/* 输入框容器 */}
      <div className={clsx(
        'relative rounded-2xl border-2 transition-all duration-200 ease-out',
        'bg-white shadow-sm hover:shadow-md',
        isFocused 
          ? 'border-blue-500 shadow-lg ring-4 ring-blue-100' 
          : 'border-gray-200 hover:border-gray-300',
        disabled && 'opacity-50 cursor-not-allowed'
      )}>
        <textarea
          ref={textareaRef}
          value={value}
          onChange={(e) => onChange(e.target.value)}
          onFocus={() => setIsFocused(true)}
          onBlur={() => setIsFocused(false)}
          onKeyDown={handleKeyDown}
          placeholder={placeholder}
          disabled={disabled}
          maxLength={maxLength}
          rows={minRows}
          className={clsx(
            'w-full px-6 py-4 bg-transparent resize-none',
            'text-gray-900 placeholder-gray-500',
            'focus:outline-none',
            'leading-6'
          )}
          style={{
            minHeight: `${minRows * 24}px`,
            maxHeight: `${maxRows * 24}px`
          }}
        />
        
        {/* 字符计数 */}
        {maxLength && (
          <div className="absolute bottom-2 right-3">
            <span className={clsx(
              'text-xs transition-colors duration-200',
              isNearLimit ? 'text-orange-500' : 'text-gray-400',
              characterCount === maxLength && 'text-red-500'
            )}>
              {characterCount}{maxLength && `/${maxLength}`}
            </span>
          </div>
        )}
      </div>
      
      {/* 底部提示 */}
      <div className="flex justify-between items-center mt-2 px-2">
        <span className="text-xs text-gray-500">
          按 Enter 发送，Shift + Enter 换行
        </span>
        <div className="flex items-center space-x-2 text-xs text-gray-400">
          <span>✨ AI驱动</span>
          {value.trim() && (
            <div className="flex items-center space-x-1 animate-fade-in">
              <div className="w-1.5 h-1.5 bg-green-400 rounded-full animate-pulse"></div>
              <span>准备发送</span>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}